import {messages} from "share/common";
import React from 'react';
import { Row, Col, DatePicker, Icon } from 'antd';
import Location from 'components/location';
import moment from 'moment';
import 'styles/mileage-subsidy-expense/way-point.scss';
import Condition from 'components/condition';

const { If } = Condition;

class WayPoint extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  handleAdd = () => {
    let { value = [], onchange } = this.props;
    value.push({});
    onchange(value);
  };

  handleLocationChange = (res, index) => {
    let { value, onChange } = this.props;
    if (value[index]['id'] && value[index]['createdMode'] === 1001 && !value[index]['originPoint']) {
      value[index]['originPoint'] = {
        lat: value[index].lat,
        lng: value[index].lng,
        place: value[index].place
      };
    }
    value[index].lat = JSON.parse(res).latitude;
    value[index].lng = JSON.parse(res).longitude;
    value[index].place = JSON.parse(res).address;
    onChange(value);
  };

  handleTimeChange = (res, index) => {
    let { value, onChange } = this.props;
    value[index].arrivalTime = res;
    onChange(value);
  };

  handleDelete = (index) => {
    let { value, onChange } = this.props;
    value.splice(index, 1);
    onChange(value);
  };

  handleElement = (result) => {
    const obj = {
      icon: Icon,
      date: DatePicker,
      location: Location
    };
    return <Col className={result.className} span={result.span}>{ React.createElement(obj[result.type], result.params)}</Col>;
  };

  renderContent = (value, index) => {
    const dataSourceV2 = [
      {
        type: 'date',
        span: 11,
        params: {
          value: value['arrivalTime'] && moment(value['arrivalTime']),
          format: 'YYYY-MM-DD HH:mm',
          showTime: true,
          onChange: (res) => this.handleTimeChange(res, index),
          className: `way-point-date ${(value['arrivalTime'] || !value['arrivalTime'] && !value.lat) && 'remove-error'}`
        }
      },
      {
        type: 'location',
        span: 11,
        params: {
          value: value.lat && JSON.stringify({
            latitude: value.lat,
            longitude: value.lng,
            address: value.place
          }),
          onChange: (res) => this.handleLocationChange(res, index)
        },
        className: `${(value['lat'] || !value['arrivalTime'] && !value.lat) && 'remove-error'}`
      },
      {
        type: 'icon',
        span: 2,
        className: 'way-point-col-2',
        params: {
          type: 'delete',
          onClick: () => this.handleDelete(index),
          className: 'way-point-icon'
        }
      }
    ];

    return dataSourceV2.map(item => this.handleElement(item, index));
  };

  render() {
    const { value = [] } = this.props;

    return (
      <section className="way-point">
        <If value={value && !!value[0]}>
          <Row className="way-point-title">
            <Col span={11}>
              {messages('mileage-subsidy-expense.key63')/*途径时间：*/}
            </Col>
            <Col span={11}>
              {messages('mileage-subsidy-expense.key64')/*途径地点：*/}
            </Col>
          </Row>
        </If>
        {
          value.map((item, index) => {
            return (
              <Row className="way-point-row">
                {this.renderContent(item, index)}
              </Row>);
          })
        }
        <If value={value.length < 16}>
          <a className="way-point-add" onClick={this.handleAdd}> {messages('mileage-subsidy-expense.key65')/*+新增途经点*/}</a>
        </If>
      </section>
    );
  }
}

WayPoint.PropTypes = {
  value: React.PropTypes.array,
  onChange: React.PropTypes.func
};

export default WayPoint;
